<template>
  <div>
    <el-dialog :title="title" :width="width" class="icon-dialog" top="6vh" :visible.sync="show" @open="open" :close-on-click-modal="false" :before-close="closeForm" append-to-body>
      <el-form :model="form" :rules="formRules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="title">
          <el-input type="text" v-model="form.title" size="medium" style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="上级角色" prop="">
          <Treeselect :default-expand-level="1" v-model="form.pid" :options="list" :normalizer="normalizer" :show-count="true" placeholder="选择上级角色"/>
        </el-form-item>
        <el-form-item label="排序" prop="">
          <el-input type="text" v-model="form.sort" size="medium"  style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="">
          <el-switch active-value="1" inactive-value="0" v-model="form.status"></el-switch>
        </el-form-item>
        <el-form-item label="备注" prop="">
          <el-input type="textarea" v-model="form.remark" size="medium"  style="width:300px;"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="closeForm" size="medium">取消</el-button>
          <el-button type="primary" size="medium" @click="onSubmit()">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import { save } from '@/api/user/role'
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
export default {
  name: "menu_edit",
  components: {Treeselect},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: {}
    },
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      title: '编辑角色',
      width: '600px',
      form: {
        id: '',
        title: '',
        pid: '',
        status: '1',
        sort: '',
        remark: '',
      },
      formRules: {
        title: [{required: true, message: '请输入角色名称', trigger: 'blur'}],
      },
      tree: [],
      updateKey: '',
      loading: false,
    }
  },
  methods: {
    open() {
      if(this.info.pid == '0' ){
        this.$delete(this.info,'pid')
      }
      if (Object.keys(this.info).length > 0) {
        this.form = JSON.parse(JSON.stringify(this.info))
      } else {
        this.$delete(this.form,'pid')
      }
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          save(this.form).then(res => {
            if (res.code == 0) {
              this.$emit('callFn')
              this.closeForm()
            }
          })
        }
      })
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.title,
        children: node.children
      };
    },
    closeForm() {
      this.$emit('update:show', false)
      this.loading = false
      for (let i in this.form) {
        if (i != 'status') {
          this.form[i] = ''
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
/deep/.el-dialog__body {
  padding-top: 20px;
}
/deep/.el-form-item {
 // margin-bottom:2px;
}
/deep/.el-form-item:last-child {
  margin-bottom: 10px;
}
.last_child {
  margin-top: 16px;
}
.item {
  display: flex;
  justify-content: space-between;
}
</style>